<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<style type="text/css"> 
body{font:"宋体";font-size:12px;} 
*{margin:0;padding:0;}

.mybutton{margin-left:10px; width:70px;}
.tablelist{margin:0 auto;width:650px;border-collapse:collapse;margin-top:15px;}
.tableheader td{border:1px solid #BCE2F3;height:20px;background:#E4F2FB;text-align:center;}
.tableline{border:1px solid #BCE2F3;height:20px;}
.tableline td{border:1px solid #BCE2F3;}
.jumppage{width:600px;float:left;margin-left:59px;text-align:right;margin-top:10px;}

</style>

<script>
function createXmlHttpObject(){
	var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}

function loadPreMenu(pre_level){
    var xmlhttp = createXmlHttpObject();
    
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
        	
        	if (xmlhttp.responseText.length != 0){
        		document.getElementById("input_prelevel").options.length = 0;
        		var menu_lists = eval(xmlhttp.responseText);
        		for (var i=0; i<menu_lists.length; i++){
        			var option = new Option(decodeURIComponent(menu_lists[i].content.replace(/\+/g, '%20')), menu_lists[i].id);
       			    document.getElementById("input_prelevel").options.add(option);
        		}
        	}
        }
    }
    
    var url = "<%=request.getContextPath()%>/preMenuLoadServlet?pre_level=" + pre_level;
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

function select_onchage(){
    var sel_index = document.getElementById("input_level").selectedIndex;
    var level = document.getElementById("input_level").options[sel_index].text;
    pre_level = level - 1;
    
    loadPreMenu(pre_level);
}

function adddata(){
	
}

</script>

</head>


<body onload="loadPreMenu(0)">
	<button type="button" style="margin-left:36px;" class="mybutton" onclick="adddata()">新增</button>
	<table id="keyinput" class="tablelist">
		<tr class="tableline" >
			<td style="text-align:center;">菜单级别</td>
			<td width="80">
				<select id="input_level" style="width: 100%" onchange="select_onchage()">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
					<option>6</option>
				</select>
			</td>
			<td width="80" style="text-align:center;">上级菜单</td>
			<td>
				<select id="input_prelevel" style="width: 100%"> 	
				</select>
			</td>
		</tr>
		<tr class="tableline" >
			<td style="text-align:center;">内容</td>
			<td colspan="3"><textarea id="input_menu" name="MSG" style="width: 100%" cols=40 rows=4></textarea></td>
		</tr>
	</table>
	</br>

    <button type="button" style="margin-left:36px;" class="mybutton" onclick="delete_row()">删除</button>
	<table id="keywordtable" class="tablelist" >
		<tr class="tableheader" >
		    <td width="20"></td>
			<td width="20">#</td>
			<td width="100">菜单1</td>
			<td width="100">菜单2</td>
			<td width="100">菜单3</td>
			<td width="100">菜单4</td>
			<td width="100">菜单5</td>
			<td width="100">菜单6</td>
		</tr>
		<tr class="tableline" ><td><input type="checkbox" id="check1" disabled="true"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check2" disabled="true"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check3" disabled="true"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check4" disabled="true"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check5" disabled="true"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check6" disabled="true"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check7" disabled="true"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check8" disabled="true"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check9" disabled="true"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
		<tr class="tableline" ><td><input type="checkbox" id="check10" disabled="true"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="display:none;"></td></tr>
	</table>
			
	<span class="jumppage">
		<a href="javascript:void(0)" onclick="jumptopage(1)">第一页&nbsp;</a>
		<a href="javascript:void(0)" onclick="jumptopage(2)">上一页&nbsp;</a>
		<a href="javascript:void(0)" onclick="jumptopage(3)">下一页&nbsp;</a>
		<a href="javascript:void(0)" onclick="jumptopage(4)">最后页&nbsp;</a>
	</span>
</body>
</html>